<template>
    <div class="app-container">
      <div>
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
          <el-form-item label="用户名">
          <el-input v-model="pageQuery.nickName" size="mini" placeholder="用户名搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="getPage()">查询</el-button>
          <el-button size="mini" icon="el-icon-delete" @click="resetgetPage()">重置</el-button>
        </el-form-item>
      </el-form>
      </div>
      <!-- 列表相关区域 -->
      <el-table
        v-loading="pageLoading"
        :data="pageVO.list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="用户名称" prop="nickName" align="center" width="350">
          <template slot-scope="{row}">
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" prop="createTime" align="center" width="350">
          <template slot-scope="{row}">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="作品数量" prop="shoppingNumber" align="center">
          <template slot-scope="{row}">
            <span>{{ row.shoppingNumber }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button  type="text" @click="addOrUpdateAccountHandle(row.userId)">
            作品详情
          </el-button>
          <el-button  type="text" @click="addOrUpdateHandle(row.userId)">
            上传作品
          </el-button>
        </template>
      </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum" :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
      <!-- 作品列表 -->
      <list v-if="accountaddOrUpdateVisible" ref="accountAddOrUpdate" />
      <Upload v-if="addOrUpdateVisible" ref="addOrUpdate" />
    </div>
  </template>
  
  <script>
  import permission from '@/directive/permission/index.js'
  import Pagination from '@/components/Pagination'
  import list from './list'
  import Upload from './Upload'
  import * as api from '@/api/multishop/shop-user'
  
  export default {
    name: '',
    components:{
        Pagination,list,Upload
    },
    directives: { permission },
    data() {
      return {
        // 查询的参数
        pageQuery: {
          nickName:'',
          pageSize: 10,
          pageNum: 1
        },
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {
        },
        addOrUpdateVisible: false,
        accountaddOrUpdateVisible: false
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      resetgetPage(){
        this.pageQuery.nickName = ''
        this.getPage()
      },
      getPage() {
        this.pageLoading = true
        api.gscloud_user({ ...this.pageQuery, ...this.searchParam }).then(pageVO => {
          this.pageVO = pageVO
          this.pageLoading = false
        })
      },
      addOrUpdateHandle(shopUserId) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(shopUserId)
        })
      },
      addOrUpdateAccountHandle(userId) {
        this.accountaddOrUpdateVisible = true
        console.log(userId)
        this.$nextTick(() => {
          this.$refs.accountAddOrUpdate.init(userId)
        })
      },
      deleteHandle(shopUserId) {
        this.$confirm(this.$t('table.sureToDelete'), this.$t('table.tips'), {
          confirmButtonText: this.$t('table.confirm'),
          cancelButtonText: this.$t('table.cancel'),
          type: 'warning'
        }).then(() => this.deleteById(shopUserId))
      },
      deleteById(shopUserId) {
        api.deleteById(shopUserId).then(() => {
          this.$message({
            message: this.$t('table.actionSuccess'),
            type: 'success',
            duration: 1500,
            onClose: () => this.getPage()
          })
        })
      }
    }
  }
  </script>
  